<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>[提纲]Vue项目-实践技巧(crud) | Plana(方案A)</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="https://luo0412.gitee.io/static/images/logo/favicon.ico">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>$(function () {
    $(".navbar .dropdown-wrapper .title").each(function (index, item) {
        var title = $(item).text() || ""
        console.log(title)
        var index = title.indexOf("(")
        if (index > -1) {
            $(item).text(title.slice(0, index))
        }
    })
})

((window.gitter = {}).chat = {}).options = {
    room: 'luo0412/plana'
};</script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script>
    <meta name="description" content="方案A">
    <link rel="preload" href="/plana/assets/css/0.styles.e9cba6b3.css" as="style"><link rel="preload" href="/plana/assets/js/app.26a35d46.js" as="script"><link rel="preload" href="/plana/assets/js/2.b5bc497d.js" as="script"><link rel="preload" href="/plana/assets/js/461.9f892ebc.js" as="script"><link rel="prefetch" href="/plana/assets/js/10.76967f04.js"><link rel="prefetch" href="/plana/assets/js/100.5188df2c.js"><link rel="prefetch" href="/plana/assets/js/101.d84c20f9.js"><link rel="prefetch" href="/plana/assets/js/102.dcbad92b.js"><link rel="prefetch" href="/plana/assets/js/103.cbf31594.js"><link rel="prefetch" href="/plana/assets/js/104.227d809c.js"><link rel="prefetch" href="/plana/assets/js/105.4690789d.js"><link rel="prefetch" href="/plana/assets/js/106.76527743.js"><link rel="prefetch" href="/plana/assets/js/107.d6e3a4d6.js"><link rel="prefetch" href="/plana/assets/js/108.6e4c8bfc.js"><link rel="prefetch" href="/plana/assets/js/109.fc12471e.js"><link rel="prefetch" href="/plana/assets/js/11.569e93dd.js"><link rel="prefetch" href="/plana/assets/js/110.85c3d834.js"><link rel="prefetch" href="/plana/assets/js/111.9c605bc7.js"><link rel="prefetch" href="/plana/assets/js/112.12b9e5d6.js"><link rel="prefetch" href="/plana/assets/js/113.21ac7878.js"><link rel="prefetch" href="/plana/assets/js/114.e4dd9de7.js"><link rel="prefetch" href="/plana/assets/js/115.8600fa46.js"><link rel="prefetch" href="/plana/assets/js/116.043898d2.js"><link rel="prefetch" href="/plana/assets/js/117.5c6253ed.js"><link rel="prefetch" href="/plana/assets/js/118.0deaa07b.js"><link rel="prefetch" href="/plana/assets/js/119.0e1b78e7.js"><link rel="prefetch" href="/plana/assets/js/12.f97471e0.js"><link rel="prefetch" href="/plana/assets/js/120.da2dcbe4.js"><link rel="prefetch" href="/plana/assets/js/121.b67072a1.js"><link rel="prefetch" href="/plana/assets/js/122.4438dfd8.js"><link rel="prefetch" href="/plana/assets/js/123.ffb881d0.js"><link rel="prefetch" href="/plana/assets/js/124.ae643d5d.js"><link rel="prefetch" href="/plana/assets/js/125.782ff172.js"><link rel="prefetch" href="/plana/assets/js/126.9cb23b0a.js"><link rel="prefetch" href="/plana/assets/js/127.2c5e040e.js"><link rel="prefetch" href="/plana/assets/js/128.f96c3297.js"><link rel="prefetch" href="/plana/assets/js/129.379dad87.js"><link rel="prefetch" href="/plana/assets/js/13.40058c53.js"><link rel="prefetch" href="/plana/assets/js/130.f350d8cd.js"><link rel="prefetch" href="/plana/assets/js/131.9b494f44.js"><link rel="prefetch" href="/plana/assets/js/132.8a6c409e.js"><link rel="prefetch" href="/plana/assets/js/133.c691db55.js"><link rel="prefetch" href="/plana/assets/js/134.e8d8a94a.js"><link rel="prefetch" href="/plana/assets/js/135.c95a1ef6.js"><link rel="prefetch" href="/plana/assets/js/136.bdd4250b.js"><link rel="prefetch" href="/plana/assets/js/137.539d6db6.js"><link rel="prefetch" href="/plana/assets/js/138.c16e3cc1.js"><link rel="prefetch" href="/plana/assets/js/139.7a1243ca.js"><link rel="prefetch" href="/plana/assets/js/14.880c2d4f.js"><link rel="prefetch" href="/plana/assets/js/140.6ed0a182.js"><link rel="prefetch" href="/plana/assets/js/141.a984158d.js"><link rel="prefetch" href="/plana/assets/js/142.e094f73f.js"><link rel="prefetch" href="/plana/assets/js/143.760a5510.js"><link rel="prefetch" href="/plana/assets/js/144.212ede62.js"><link rel="prefetch" href="/plana/assets/js/145.2e06e4c9.js"><link rel="prefetch" href="/plana/assets/js/146.16713494.js"><link rel="prefetch" href="/plana/assets/js/147.7b0585c3.js"><link rel="prefetch" href="/plana/assets/js/148.ae82990b.js"><link rel="prefetch" href="/plana/assets/js/149.73a7c703.js"><link rel="prefetch" href="/plana/assets/js/15.5364aa14.js"><link rel="prefetch" href="/plana/assets/js/150.fec18e0b.js"><link rel="prefetch" href="/plana/assets/js/151.14bf6cea.js"><link rel="prefetch" href="/plana/assets/js/152.17f17b04.js"><link rel="prefetch" href="/plana/assets/js/153.ba7c5f21.js"><link rel="prefetch" href="/plana/assets/js/154.d3340db4.js"><link rel="prefetch" href="/plana/assets/js/155.2bf1dbde.js"><link rel="prefetch" href="/plana/assets/js/156.70d23de7.js"><link rel="prefetch" href="/plana/assets/js/157.93a62465.js"><link rel="prefetch" href="/plana/assets/js/158.bf486b60.js"><link rel="prefetch" href="/plana/assets/js/159.f19e7955.js"><link rel="prefetch" href="/plana/assets/js/16.e96c9bd3.js"><link rel="prefetch" href="/plana/assets/js/160.3dc61d59.js"><link rel="prefetch" href="/plana/assets/js/161.0fff4227.js"><link rel="prefetch" href="/plana/assets/js/162.70526488.js"><link rel="prefetch" href="/plana/assets/js/163.faa79f0a.js"><link rel="prefetch" href="/plana/assets/js/164.9c80b5bb.js"><link rel="prefetch" href="/plana/assets/js/165.7f9b0124.js"><link rel="prefetch" href="/plana/assets/js/166.36435978.js"><link rel="prefetch" href="/plana/assets/js/167.feea7028.js"><link rel="prefetch" href="/plana/assets/js/168.cc504d5f.js"><link rel="prefetch" href="/plana/assets/js/169.ec7d4b8a.js"><link rel="prefetch" href="/plana/assets/js/17.07c08387.js"><link rel="prefetch" href="/plana/assets/js/170.a8b4b58d.js"><link rel="prefetch" href="/plana/assets/js/171.2329fa88.js"><link rel="prefetch" href="/plana/assets/js/172.286ac28f.js"><link rel="prefetch" href="/plana/assets/js/173.a692852e.js"><link rel="prefetch" href="/plana/assets/js/174.a39922f0.js"><link rel="prefetch" href="/plana/assets/js/175.b47f1b23.js"><link rel="prefetch" href="/plana/assets/js/176.86486ead.js"><link rel="prefetch" href="/plana/assets/js/177.40f1c5b7.js"><link rel="prefetch" href="/plana/assets/js/178.7a9ca10d.js"><link rel="prefetch" href="/plana/assets/js/179.19051ac2.js"><link rel="prefetch" href="/plana/assets/js/18.e433f8d3.js"><link rel="prefetch" href="/plana/assets/js/180.57d0c928.js"><link rel="prefetch" href="/plana/assets/js/181.00da0f3d.js"><link rel="prefetch" href="/plana/assets/js/182.cadb79df.js"><link rel="prefetch" href="/plana/assets/js/183.8dd3881a.js"><link rel="prefetch" href="/plana/assets/js/184.1222a110.js"><link rel="prefetch" href="/plana/assets/js/185.7d9330c8.js"><link rel="prefetch" href="/plana/assets/js/186.d6ddbb60.js"><link rel="prefetch" href="/plana/assets/js/187.f19bfcc2.js"><link rel="prefetch" href="/plana/assets/js/188.b801053a.js"><link rel="prefetch" href="/plana/assets/js/189.9bf68bd8.js"><link rel="prefetch" href="/plana/assets/js/19.0f82fe28.js"><link rel="prefetch" href="/plana/assets/js/190.158c0b50.js"><link rel="prefetch" href="/plana/assets/js/191.cdca9aef.js"><link rel="prefetch" href="/plana/assets/js/192.84164400.js"><link rel="prefetch" href="/plana/assets/js/193.6fee8315.js"><link rel="prefetch" href="/plana/assets/js/194.646a3bc9.js"><link rel="prefetch" href="/plana/assets/js/195.f63862f4.js"><link rel="prefetch" href="/plana/assets/js/196.4b0d972c.js"><link rel="prefetch" href="/plana/assets/js/197.e706ce3c.js"><link rel="prefetch" href="/plana/assets/js/198.8b9720bf.js"><link rel="prefetch" href="/plana/assets/js/199.49a5e793.js"><link rel="prefetch" href="/plana/assets/js/20.619cb712.js"><link rel="prefetch" href="/plana/assets/js/200.ef546dd9.js"><link rel="prefetch" href="/plana/assets/js/201.479054ec.js"><link rel="prefetch" href="/plana/assets/js/202.0b3389ee.js"><link rel="prefetch" href="/plana/assets/js/203.22150890.js"><link rel="prefetch" href="/plana/assets/js/204.2dc71336.js"><link rel="prefetch" href="/plana/assets/js/205.e377c245.js"><link rel="prefetch" href="/plana/assets/js/206.1ace4feb.js"><link rel="prefetch" href="/plana/assets/js/207.323fa10a.js"><link rel="prefetch" href="/plana/assets/js/208.e353a6ec.js"><link rel="prefetch" href="/plana/assets/js/209.316ac6f0.js"><link rel="prefetch" href="/plana/assets/js/21.d91a849c.js"><link rel="prefetch" href="/plana/assets/js/210.d4f18535.js"><link rel="prefetch" href="/plana/assets/js/211.573c492b.js"><link rel="prefetch" href="/plana/assets/js/212.b2a16387.js"><link rel="prefetch" href="/plana/assets/js/213.c2fac0b1.js"><link rel="prefetch" href="/plana/assets/js/214.79b62576.js"><link rel="prefetch" href="/plana/assets/js/215.fe6c3e10.js"><link rel="prefetch" href="/plana/assets/js/216.18f410e2.js"><link rel="prefetch" href="/plana/assets/js/217.20c9e9eb.js"><link rel="prefetch" href="/plana/assets/js/218.a0eeeb7c.js"><link rel="prefetch" href="/plana/assets/js/219.b956aca7.js"><link rel="prefetch" href="/plana/assets/js/22.366fc766.js"><link rel="prefetch" href="/plana/assets/js/220.5ed5e277.js"><link rel="prefetch" href="/plana/assets/js/221.468f9087.js"><link rel="prefetch" href="/plana/assets/js/222.638dc5f6.js"><link rel="prefetch" href="/plana/assets/js/223.0fad689f.js"><link rel="prefetch" href="/plana/assets/js/224.61ad16fd.js"><link rel="prefetch" href="/plana/assets/js/225.91089e6c.js"><link rel="prefetch" href="/plana/assets/js/226.2f0d158a.js"><link rel="prefetch" href="/plana/assets/js/227.43288d9d.js"><link rel="prefetch" href="/plana/assets/js/228.4bff0625.js"><link rel="prefetch" href="/plana/assets/js/229.9c3666b2.js"><link rel="prefetch" href="/plana/assets/js/23.d2ecdcc9.js"><link rel="prefetch" href="/plana/assets/js/230.b52057f9.js"><link rel="prefetch" href="/plana/assets/js/231.cc0ed124.js"><link rel="prefetch" href="/plana/assets/js/232.9ad374c5.js"><link rel="prefetch" href="/plana/assets/js/233.d794c11f.js"><link rel="prefetch" href="/plana/assets/js/234.26ac8fbc.js"><link rel="prefetch" href="/plana/assets/js/235.41250663.js"><link rel="prefetch" href="/plana/assets/js/236.881374a2.js"><link rel="prefetch" href="/plana/assets/js/237.c7bd84e0.js"><link rel="prefetch" href="/plana/assets/js/238.98726af2.js"><link rel="prefetch" href="/plana/assets/js/239.9f11e102.js"><link rel="prefetch" href="/plana/assets/js/24.02b55c75.js"><link rel="prefetch" href="/plana/assets/js/240.a7cac4ef.js"><link rel="prefetch" href="/plana/assets/js/241.462a960b.js"><link rel="prefetch" href="/plana/assets/js/242.7cf42754.js"><link rel="prefetch" href="/plana/assets/js/243.b3d1619f.js"><link rel="prefetch" href="/plana/assets/js/244.40da516b.js"><link rel="prefetch" href="/plana/assets/js/245.ada0c168.js"><link rel="prefetch" href="/plana/assets/js/246.38614800.js"><link rel="prefetch" href="/plana/assets/js/247.491612a2.js"><link rel="prefetch" href="/plana/assets/js/248.23741832.js"><link rel="prefetch" href="/plana/assets/js/249.90624a3a.js"><link rel="prefetch" href="/plana/assets/js/25.96e9e495.js"><link rel="prefetch" href="/plana/assets/js/250.f5946779.js"><link rel="prefetch" href="/plana/assets/js/251.58091edf.js"><link rel="prefetch" href="/plana/assets/js/252.fbe32ae4.js"><link rel="prefetch" href="/plana/assets/js/253.1cdd8f1c.js"><link rel="prefetch" href="/plana/assets/js/254.651e7bc6.js"><link rel="prefetch" href="/plana/assets/js/255.58aaa830.js"><link rel="prefetch" href="/plana/assets/js/256.08653b0a.js"><link rel="prefetch" href="/plana/assets/js/257.18da3dda.js"><link rel="prefetch" href="/plana/assets/js/258.e639b138.js"><link rel="prefetch" href="/plana/assets/js/259.9a2ccdd8.js"><link rel="prefetch" href="/plana/assets/js/26.786f768e.js"><link rel="prefetch" href="/plana/assets/js/260.1ffec687.js"><link rel="prefetch" href="/plana/assets/js/261.6f007b8c.js"><link rel="prefetch" href="/plana/assets/js/262.eebd1210.js"><link rel="prefetch" href="/plana/assets/js/263.1672d254.js"><link rel="prefetch" href="/plana/assets/js/264.a786f2f0.js"><link rel="prefetch" href="/plana/assets/js/265.b08f361a.js"><link rel="prefetch" href="/plana/assets/js/266.6b9c1b18.js"><link rel="prefetch" href="/plana/assets/js/267.05341052.js"><link rel="prefetch" href="/plana/assets/js/268.2b47894a.js"><link rel="prefetch" href="/plana/assets/js/269.b00e1745.js"><link rel="prefetch" href="/plana/assets/js/27.d95cd926.js"><link rel="prefetch" href="/plana/assets/js/270.f09aa40d.js"><link rel="prefetch" href="/plana/assets/js/271.036eefbf.js"><link rel="prefetch" href="/plana/assets/js/272.685451a2.js"><link rel="prefetch" href="/plana/assets/js/273.489debcf.js"><link rel="prefetch" href="/plana/assets/js/274.3f824bc5.js"><link rel="prefetch" href="/plana/assets/js/275.d3661899.js"><link rel="prefetch" href="/plana/assets/js/276.0dd18e5e.js"><link rel="prefetch" href="/plana/assets/js/277.1ec17e71.js"><link rel="prefetch" href="/plana/assets/js/278.6379871f.js"><link rel="prefetch" href="/plana/assets/js/279.a0692e92.js"><link rel="prefetch" href="/plana/assets/js/28.c63f738d.js"><link rel="prefetch" href="/plana/assets/js/280.34932565.js"><link rel="prefetch" href="/plana/assets/js/281.ae742fd5.js"><link rel="prefetch" href="/plana/assets/js/282.715175d9.js"><link rel="prefetch" href="/plana/assets/js/283.9b6a3e34.js"><link rel="prefetch" href="/plana/assets/js/284.00628265.js"><link rel="prefetch" href="/plana/assets/js/285.3de0dd73.js"><link rel="prefetch" href="/plana/assets/js/286.6a2d6c2a.js"><link rel="prefetch" href="/plana/assets/js/287.74cdf243.js"><link rel="prefetch" href="/plana/assets/js/288.42fdbe73.js"><link rel="prefetch" href="/plana/assets/js/289.f4afe8dc.js"><link rel="prefetch" href="/plana/assets/js/29.84c2f6be.js"><link rel="prefetch" href="/plana/assets/js/290.6fad3c29.js"><link rel="prefetch" href="/plana/assets/js/291.b0ad0381.js"><link rel="prefetch" href="/plana/assets/js/292.888b58ac.js"><link rel="prefetch" href="/plana/assets/js/293.1ed605a6.js"><link rel="prefetch" href="/plana/assets/js/294.3af3dec3.js"><link rel="prefetch" href="/plana/assets/js/295.db08edcf.js"><link rel="prefetch" href="/plana/assets/js/296.e4837fb2.js"><link rel="prefetch" href="/plana/assets/js/297.25eb8cb6.js"><link rel="prefetch" href="/plana/assets/js/298.4948e1d0.js"><link rel="prefetch" href="/plana/assets/js/299.56ff4927.js"><link rel="prefetch" href="/plana/assets/js/3.27803fd3.js"><link rel="prefetch" href="/plana/assets/js/30.a9337659.js"><link rel="prefetch" href="/plana/assets/js/300.8dad7bd4.js"><link rel="prefetch" href="/plana/assets/js/301.1d0bd3b7.js"><link rel="prefetch" href="/plana/assets/js/302.24c7060b.js"><link rel="prefetch" href="/plana/assets/js/303.a4a7908d.js"><link rel="prefetch" href="/plana/assets/js/304.d5a32c16.js"><link rel="prefetch" href="/plana/assets/js/305.eb22a5e4.js"><link rel="prefetch" href="/plana/assets/js/306.cdaa56b9.js"><link rel="prefetch" href="/plana/assets/js/307.f7e38353.js"><link rel="prefetch" href="/plana/assets/js/308.3f3f49e6.js"><link rel="prefetch" href="/plana/assets/js/309.ba1c34b9.js"><link rel="prefetch" href="/plana/assets/js/31.f4ff74a7.js"><link rel="prefetch" href="/plana/assets/js/310.06e88629.js"><link rel="prefetch" href="/plana/assets/js/311.7cadacd8.js"><link rel="prefetch" href="/plana/assets/js/312.36004dd0.js"><link rel="prefetch" href="/plana/assets/js/313.efb51116.js"><link rel="prefetch" href="/plana/assets/js/314.55c74d14.js"><link rel="prefetch" href="/plana/assets/js/315.fc4d91f4.js"><link rel="prefetch" href="/plana/assets/js/316.dde0feb1.js"><link rel="prefetch" href="/plana/assets/js/317.ef59c7dd.js"><link rel="prefetch" href="/plana/assets/js/318.9c8514de.js"><link rel="prefetch" href="/plana/assets/js/319.e934bf23.js"><link rel="prefetch" href="/plana/assets/js/32.611da568.js"><link rel="prefetch" href="/plana/assets/js/320.2c3bf800.js"><link rel="prefetch" href="/plana/assets/js/321.2f166a58.js"><link rel="prefetch" href="/plana/assets/js/322.2727112d.js"><link rel="prefetch" href="/plana/assets/js/323.987dae09.js"><link rel="prefetch" href="/plana/assets/js/324.059197e5.js"><link rel="prefetch" href="/plana/assets/js/325.251603a9.js"><link rel="prefetch" href="/plana/assets/js/326.b9aa9786.js"><link rel="prefetch" href="/plana/assets/js/327.83df42f2.js"><link rel="prefetch" href="/plana/assets/js/328.437841b5.js"><link rel="prefetch" href="/plana/assets/js/329.4705178f.js"><link rel="prefetch" href="/plana/assets/js/33.04179be5.js"><link rel="prefetch" href="/plana/assets/js/330.7fefbd39.js"><link rel="prefetch" href="/plana/assets/js/331.324b88a4.js"><link rel="prefetch" href="/plana/assets/js/332.9dbc0a0f.js"><link rel="prefetch" href="/plana/assets/js/333.a9f4ba89.js"><link rel="prefetch" href="/plana/assets/js/334.bfc521ff.js"><link rel="prefetch" href="/plana/assets/js/335.ea772c69.js"><link rel="prefetch" href="/plana/assets/js/336.3c139a73.js"><link rel="prefetch" href="/plana/assets/js/337.4b7b5285.js"><link rel="prefetch" href="/plana/assets/js/338.40b3bfdb.js"><link rel="prefetch" href="/plana/assets/js/339.bf0c2419.js"><link rel="prefetch" href="/plana/assets/js/34.7d7532c6.js"><link rel="prefetch" href="/plana/assets/js/340.9ceb2f7a.js"><link rel="prefetch" href="/plana/assets/js/341.bc48efb9.js"><link rel="prefetch" href="/plana/assets/js/342.75077914.js"><link rel="prefetch" href="/plana/assets/js/343.efda7d56.js"><link rel="prefetch" href="/plana/assets/js/344.31c0f3c6.js"><link rel="prefetch" href="/plana/assets/js/345.7fb06b95.js"><link rel="prefetch" href="/plana/assets/js/346.55ccf355.js"><link rel="prefetch" href="/plana/assets/js/347.98aa9eab.js"><link rel="prefetch" href="/plana/assets/js/348.878dac49.js"><link rel="prefetch" href="/plana/assets/js/349.878acfca.js"><link rel="prefetch" href="/plana/assets/js/35.a56a078a.js"><link rel="prefetch" href="/plana/assets/js/350.67d85dec.js"><link rel="prefetch" href="/plana/assets/js/351.fe864f55.js"><link rel="prefetch" href="/plana/assets/js/352.0140a20d.js"><link rel="prefetch" href="/plana/assets/js/353.1a2bdf26.js"><link rel="prefetch" href="/plana/assets/js/354.e698b263.js"><link rel="prefetch" href="/plana/assets/js/355.69178048.js"><link rel="prefetch" href="/plana/assets/js/356.13571020.js"><link rel="prefetch" href="/plana/assets/js/357.666a6e4e.js"><link rel="prefetch" href="/plana/assets/js/358.3a859aae.js"><link rel="prefetch" href="/plana/assets/js/359.e6291586.js"><link rel="prefetch" href="/plana/assets/js/36.6b2c1c06.js"><link rel="prefetch" href="/plana/assets/js/360.553be648.js"><link rel="prefetch" href="/plana/assets/js/361.f674d762.js"><link rel="prefetch" href="/plana/assets/js/362.41696f0b.js"><link rel="prefetch" href="/plana/assets/js/363.db6b18e5.js"><link rel="prefetch" href="/plana/assets/js/364.f4ef8d66.js"><link rel="prefetch" href="/plana/assets/js/365.060bb2cd.js"><link rel="prefetch" href="/plana/assets/js/366.af8be9cf.js"><link rel="prefetch" href="/plana/assets/js/367.89b9bd1a.js"><link rel="prefetch" href="/plana/assets/js/368.4a0db9f9.js"><link rel="prefetch" href="/plana/assets/js/369.0f137c05.js"><link rel="prefetch" href="/plana/assets/js/37.a372e2ff.js"><link rel="prefetch" href="/plana/assets/js/370.d0503cfb.js"><link rel="prefetch" href="/plana/assets/js/371.a5a61f6c.js"><link rel="prefetch" href="/plana/assets/js/372.a8beeec6.js"><link rel="prefetch" href="/plana/assets/js/373.52486327.js"><link rel="prefetch" href="/plana/assets/js/374.becb79ef.js"><link rel="prefetch" href="/plana/assets/js/375.adbe845a.js"><link rel="prefetch" href="/plana/assets/js/376.0b725de7.js"><link rel="prefetch" href="/plana/assets/js/377.6d0755e8.js"><link rel="prefetch" href="/plana/assets/js/378.9899dca3.js"><link rel="prefetch" href="/plana/assets/js/379.8567246b.js"><link rel="prefetch" href="/plana/assets/js/38.bf139dae.js"><link rel="prefetch" href="/plana/assets/js/380.fff3aeb0.js"><link rel="prefetch" href="/plana/assets/js/381.5d8ddb4d.js"><link rel="prefetch" href="/plana/assets/js/382.ebb79c48.js"><link rel="prefetch" href="/plana/assets/js/383.b1d8b5be.js"><link rel="prefetch" href="/plana/assets/js/384.b8ef0439.js"><link rel="prefetch" href="/plana/assets/js/385.274ad089.js"><link rel="prefetch" href="/plana/assets/js/386.8dc07401.js"><link rel="prefetch" href="/plana/assets/js/387.aea18e98.js"><link rel="prefetch" href="/plana/assets/js/388.1ef06a0b.js"><link rel="prefetch" href="/plana/assets/js/389.9d65f18d.js"><link rel="prefetch" href="/plana/assets/js/39.5a4f8e59.js"><link rel="prefetch" href="/plana/assets/js/390.6bd12dc7.js"><link rel="prefetch" href="/plana/assets/js/391.6ef66911.js"><link rel="prefetch" href="/plana/assets/js/392.ffba56bb.js"><link rel="prefetch" href="/plana/assets/js/393.a5fc8fba.js"><link rel="prefetch" href="/plana/assets/js/394.6ab7521b.js"><link rel="prefetch" href="/plana/assets/js/395.3ab7f171.js"><link rel="prefetch" href="/plana/assets/js/396.0791500c.js"><link rel="prefetch" href="/plana/assets/js/397.28bf46c8.js"><link rel="prefetch" href="/plana/assets/js/398.7807db8d.js"><link rel="prefetch" href="/plana/assets/js/399.4d403b1b.js"><link rel="prefetch" href="/plana/assets/js/4.6af04a85.js"><link rel="prefetch" href="/plana/assets/js/40.43e4b38f.js"><link rel="prefetch" href="/plana/assets/js/400.c888a05f.js"><link rel="prefetch" href="/plana/assets/js/401.6dfdc401.js"><link rel="prefetch" href="/plana/assets/js/402.2836e580.js"><link rel="prefetch" href="/plana/assets/js/403.a8ec3c75.js"><link rel="prefetch" href="/plana/assets/js/404.5858ee05.js"><link rel="prefetch" href="/plana/assets/js/405.4fd5cbce.js"><link rel="prefetch" href="/plana/assets/js/406.059c34fc.js"><link rel="prefetch" href="/plana/assets/js/407.1991324f.js"><link rel="prefetch" href="/plana/assets/js/408.57f13ab2.js"><link rel="prefetch" href="/plana/assets/js/409.b3fdbf19.js"><link rel="prefetch" href="/plana/assets/js/41.baf41ad2.js"><link rel="prefetch" href="/plana/assets/js/410.1c66b59b.js"><link rel="prefetch" href="/plana/assets/js/411.89daa103.js"><link rel="prefetch" href="/plana/assets/js/412.5fd17d05.js"><link rel="prefetch" href="/plana/assets/js/413.67df2b20.js"><link rel="prefetch" href="/plana/assets/js/414.7c1feaab.js"><link rel="prefetch" href="/plana/assets/js/415.e07db45d.js"><link rel="prefetch" href="/plana/assets/js/416.fe7e2c62.js"><link rel="prefetch" href="/plana/assets/js/417.c9f94e9c.js"><link rel="prefetch" href="/plana/assets/js/418.18704cfc.js"><link rel="prefetch" href="/plana/assets/js/419.9f113e64.js"><link rel="prefetch" href="/plana/assets/js/42.f2884796.js"><link rel="prefetch" href="/plana/assets/js/420.2a5f3a3f.js"><link rel="prefetch" href="/plana/assets/js/421.1b110d49.js"><link rel="prefetch" href="/plana/assets/js/422.b836f5a4.js"><link rel="prefetch" href="/plana/assets/js/423.9fa437af.js"><link rel="prefetch" href="/plana/assets/js/424.0fc0a623.js"><link rel="prefetch" href="/plana/assets/js/425.4bee6afc.js"><link rel="prefetch" href="/plana/assets/js/426.036d5a1b.js"><link rel="prefetch" href="/plana/assets/js/427.f2a1aa48.js"><link rel="prefetch" href="/plana/assets/js/428.fc22796c.js"><link rel="prefetch" href="/plana/assets/js/429.b6acfba5.js"><link rel="prefetch" href="/plana/assets/js/43.7aa39e52.js"><link rel="prefetch" href="/plana/assets/js/430.ed97aa43.js"><link rel="prefetch" href="/plana/assets/js/431.2fc0d4e3.js"><link rel="prefetch" href="/plana/assets/js/432.43115b63.js"><link rel="prefetch" href="/plana/assets/js/433.a1c3b83a.js"><link rel="prefetch" href="/plana/assets/js/434.ee152248.js"><link rel="prefetch" href="/plana/assets/js/435.24976c8a.js"><link rel="prefetch" href="/plana/assets/js/436.59dd1ab1.js"><link rel="prefetch" href="/plana/assets/js/437.50136991.js"><link rel="prefetch" href="/plana/assets/js/438.5eb6bf82.js"><link rel="prefetch" href="/plana/assets/js/439.9e310ae5.js"><link rel="prefetch" href="/plana/assets/js/44.ea8da77b.js"><link rel="prefetch" href="/plana/assets/js/440.2457f927.js"><link rel="prefetch" href="/plana/assets/js/441.fbc13ad6.js"><link rel="prefetch" href="/plana/assets/js/442.d130c4b3.js"><link rel="prefetch" href="/plana/assets/js/443.1f900823.js"><link rel="prefetch" href="/plana/assets/js/444.3834d598.js"><link rel="prefetch" href="/plana/assets/js/445.16932093.js"><link rel="prefetch" href="/plana/assets/js/446.24711545.js"><link rel="prefetch" href="/plana/assets/js/447.568b3f96.js"><link rel="prefetch" href="/plana/assets/js/448.8883fa0d.js"><link rel="prefetch" href="/plana/assets/js/449.f6184633.js"><link rel="prefetch" href="/plana/assets/js/45.73a9f625.js"><link rel="prefetch" href="/plana/assets/js/450.a996511c.js"><link rel="prefetch" href="/plana/assets/js/451.1b1843f7.js"><link rel="prefetch" href="/plana/assets/js/452.0be6db8b.js"><link rel="prefetch" href="/plana/assets/js/453.2c9eca27.js"><link rel="prefetch" href="/plana/assets/js/454.43d6b922.js"><link rel="prefetch" href="/plana/assets/js/455.798dc8d2.js"><link rel="prefetch" href="/plana/assets/js/456.5294aa61.js"><link rel="prefetch" href="/plana/assets/js/457.582336be.js"><link rel="prefetch" href="/plana/assets/js/458.3ae86239.js"><link rel="prefetch" href="/plana/assets/js/459.17fe935e.js"><link rel="prefetch" href="/plana/assets/js/46.6c8e3280.js"><link rel="prefetch" href="/plana/assets/js/460.e3ca3d89.js"><link rel="prefetch" href="/plana/assets/js/462.57d0ad29.js"><link rel="prefetch" href="/plana/assets/js/463.a1965841.js"><link rel="prefetch" href="/plana/assets/js/464.d0da0b56.js"><link rel="prefetch" href="/plana/assets/js/465.6cb0dd50.js"><link rel="prefetch" href="/plana/assets/js/466.272ea41f.js"><link rel="prefetch" href="/plana/assets/js/467.9c04d6bf.js"><link rel="prefetch" href="/plana/assets/js/468.b91655c9.js"><link rel="prefetch" href="/plana/assets/js/469.e4727b4f.js"><link rel="prefetch" href="/plana/assets/js/47.3909e74a.js"><link rel="prefetch" href="/plana/assets/js/470.b11beb41.js"><link rel="prefetch" href="/plana/assets/js/471.4753cb89.js"><link rel="prefetch" href="/plana/assets/js/472.29077ff8.js"><link rel="prefetch" href="/plana/assets/js/473.a653331c.js"><link rel="prefetch" href="/plana/assets/js/474.2a8fae88.js"><link rel="prefetch" href="/plana/assets/js/475.9b78390f.js"><link rel="prefetch" href="/plana/assets/js/476.9e13c339.js"><link rel="prefetch" href="/plana/assets/js/477.05a2179e.js"><link rel="prefetch" href="/plana/assets/js/478.9c4f06c9.js"><link rel="prefetch" href="/plana/assets/js/479.559e2b93.js"><link rel="prefetch" href="/plana/assets/js/48.be057863.js"><link rel="prefetch" href="/plana/assets/js/480.ec41e7ce.js"><link rel="prefetch" href="/plana/assets/js/481.113c6aa3.js"><link rel="prefetch" href="/plana/assets/js/482.40e20309.js"><link rel="prefetch" href="/plana/assets/js/483.689e3d97.js"><link rel="prefetch" href="/plana/assets/js/484.069ebf35.js"><link rel="prefetch" href="/plana/assets/js/485.9e7bd20f.js"><link rel="prefetch" href="/plana/assets/js/486.c163809d.js"><link rel="prefetch" href="/plana/assets/js/487.acdd4863.js"><link rel="prefetch" href="/plana/assets/js/488.6075f8e7.js"><link rel="prefetch" href="/plana/assets/js/489.77207a01.js"><link rel="prefetch" href="/plana/assets/js/49.64cd900d.js"><link rel="prefetch" href="/plana/assets/js/490.2bb176f4.js"><link rel="prefetch" href="/plana/assets/js/491.07e739a2.js"><link rel="prefetch" href="/plana/assets/js/492.e07a5eee.js"><link rel="prefetch" href="/plana/assets/js/493.333ffb97.js"><link rel="prefetch" href="/plana/assets/js/494.ef208677.js"><link rel="prefetch" href="/plana/assets/js/495.a1f2d8cb.js"><link rel="prefetch" href="/plana/assets/js/496.6f6a823a.js"><link rel="prefetch" href="/plana/assets/js/497.c44b60d1.js"><link rel="prefetch" href="/plana/assets/js/498.2b898143.js"><link rel="prefetch" href="/plana/assets/js/499.366c11df.js"><link rel="prefetch" href="/plana/assets/js/5.6d71262c.js"><link rel="prefetch" href="/plana/assets/js/50.b2d0e32a.js"><link rel="prefetch" href="/plana/assets/js/500.c2769d0d.js"><link rel="prefetch" href="/plana/assets/js/501.5db31a91.js"><link rel="prefetch" href="/plana/assets/js/502.6550f71c.js"><link rel="prefetch" href="/plana/assets/js/503.bcac8e8e.js"><link rel="prefetch" href="/plana/assets/js/504.defc6a0c.js"><link rel="prefetch" href="/plana/assets/js/505.6db6e3e2.js"><link rel="prefetch" href="/plana/assets/js/506.1be6db54.js"><link rel="prefetch" href="/plana/assets/js/507.e3063e28.js"><link rel="prefetch" href="/plana/assets/js/508.9fcc5bc1.js"><link rel="prefetch" href="/plana/assets/js/509.69b407c9.js"><link rel="prefetch" href="/plana/assets/js/51.98c6fcd6.js"><link rel="prefetch" href="/plana/assets/js/510.78cc9b58.js"><link rel="prefetch" href="/plana/assets/js/511.890e750c.js"><link rel="prefetch" href="/plana/assets/js/512.54f5237b.js"><link rel="prefetch" href="/plana/assets/js/513.71e81daf.js"><link rel="prefetch" href="/plana/assets/js/514.43eff2c4.js"><link rel="prefetch" href="/plana/assets/js/515.267a0ebd.js"><link rel="prefetch" href="/plana/assets/js/516.619a751e.js"><link rel="prefetch" href="/plana/assets/js/517.7e7b4f57.js"><link rel="prefetch" href="/plana/assets/js/518.4b5b069f.js"><link rel="prefetch" href="/plana/assets/js/519.cecd2dba.js"><link rel="prefetch" href="/plana/assets/js/52.51175da9.js"><link rel="prefetch" href="/plana/assets/js/520.d61eaea1.js"><link rel="prefetch" href="/plana/assets/js/521.1bdd256d.js"><link rel="prefetch" href="/plana/assets/js/522.9eb89cb1.js"><link rel="prefetch" href="/plana/assets/js/523.c21b0f67.js"><link rel="prefetch" href="/plana/assets/js/524.e8e2b891.js"><link rel="prefetch" href="/plana/assets/js/525.5d527982.js"><link rel="prefetch" href="/plana/assets/js/526.06ac5112.js"><link rel="prefetch" href="/plana/assets/js/527.9fb3036e.js"><link rel="prefetch" href="/plana/assets/js/528.fc9e2c1b.js"><link rel="prefetch" href="/plana/assets/js/529.9334c6ad.js"><link rel="prefetch" href="/plana/assets/js/53.4db53b65.js"><link rel="prefetch" href="/plana/assets/js/530.d069e448.js"><link rel="prefetch" href="/plana/assets/js/531.6b5d9a6c.js"><link rel="prefetch" href="/plana/assets/js/532.b288face.js"><link rel="prefetch" href="/plana/assets/js/533.dd36700a.js"><link rel="prefetch" href="/plana/assets/js/534.430379e3.js"><link rel="prefetch" href="/plana/assets/js/535.5b1ec919.js"><link rel="prefetch" href="/plana/assets/js/536.62d48a69.js"><link rel="prefetch" href="/plana/assets/js/537.e4ba4cc0.js"><link rel="prefetch" href="/plana/assets/js/538.2ba0b7b5.js"><link rel="prefetch" href="/plana/assets/js/539.44d94e0a.js"><link rel="prefetch" href="/plana/assets/js/54.4ecc183c.js"><link rel="prefetch" href="/plana/assets/js/540.58126542.js"><link rel="prefetch" href="/plana/assets/js/541.8a2719d4.js"><link rel="prefetch" href="/plana/assets/js/542.63823f7d.js"><link rel="prefetch" href="/plana/assets/js/543.fd601531.js"><link rel="prefetch" href="/plana/assets/js/544.c2d41a95.js"><link rel="prefetch" href="/plana/assets/js/545.c0f15057.js"><link rel="prefetch" href="/plana/assets/js/546.752d4411.js"><link rel="prefetch" href="/plana/assets/js/547.05b54675.js"><link rel="prefetch" href="/plana/assets/js/548.9c781add.js"><link rel="prefetch" href="/plana/assets/js/549.f1400ef4.js"><link rel="prefetch" href="/plana/assets/js/55.eea26142.js"><link rel="prefetch" href="/plana/assets/js/550.1c4c183f.js"><link rel="prefetch" href="/plana/assets/js/551.a6ea4558.js"><link rel="prefetch" href="/plana/assets/js/552.0d04b29e.js"><link rel="prefetch" href="/plana/assets/js/553.5c2ddf4f.js"><link rel="prefetch" href="/plana/assets/js/554.0a16293a.js"><link rel="prefetch" href="/plana/assets/js/555.015fced4.js"><link rel="prefetch" href="/plana/assets/js/556.6a698949.js"><link rel="prefetch" href="/plana/assets/js/557.fee4398a.js"><link rel="prefetch" href="/plana/assets/js/558.20023b16.js"><link rel="prefetch" href="/plana/assets/js/559.fd760ca6.js"><link rel="prefetch" href="/plana/assets/js/56.8bddb4ea.js"><link rel="prefetch" href="/plana/assets/js/560.27c09de9.js"><link rel="prefetch" href="/plana/assets/js/561.1b28b647.js"><link rel="prefetch" href="/plana/assets/js/562.de1b62da.js"><link rel="prefetch" href="/plana/assets/js/563.3e063e33.js"><link rel="prefetch" href="/plana/assets/js/564.fbdb4383.js"><link rel="prefetch" href="/plana/assets/js/565.6ac66720.js"><link rel="prefetch" href="/plana/assets/js/566.00ccbe3d.js"><link rel="prefetch" href="/plana/assets/js/567.822ff786.js"><link rel="prefetch" href="/plana/assets/js/568.2ebcf522.js"><link rel="prefetch" href="/plana/assets/js/569.ee2e3485.js"><link rel="prefetch" href="/plana/assets/js/57.ff655a80.js"><link rel="prefetch" href="/plana/assets/js/570.a9314e9d.js"><link rel="prefetch" href="/plana/assets/js/571.af242a14.js"><link rel="prefetch" href="/plana/assets/js/572.dff86d44.js"><link rel="prefetch" href="/plana/assets/js/573.060ed316.js"><link rel="prefetch" href="/plana/assets/js/574.ecea29a4.js"><link rel="prefetch" href="/plana/assets/js/575.a526b6e0.js"><link rel="prefetch" href="/plana/assets/js/576.1a856efd.js"><link rel="prefetch" href="/plana/assets/js/577.340a24d3.js"><link rel="prefetch" href="/plana/assets/js/578.1e87e5de.js"><link rel="prefetch" href="/plana/assets/js/579.ba400d0d.js"><link rel="prefetch" href="/plana/assets/js/58.6d7395ff.js"><link rel="prefetch" href="/plana/assets/js/580.8470a6ab.js"><link rel="prefetch" href="/plana/assets/js/581.24b8fa46.js"><link rel="prefetch" href="/plana/assets/js/582.11991e75.js"><link rel="prefetch" href="/plana/assets/js/583.1af0e850.js"><link rel="prefetch" href="/plana/assets/js/584.b671635d.js"><link rel="prefetch" href="/plana/assets/js/585.5ec10dae.js"><link rel="prefetch" href="/plana/assets/js/586.cf868939.js"><link rel="prefetch" href="/plana/assets/js/587.e937242b.js"><link rel="prefetch" href="/plana/assets/js/588.9993b844.js"><link rel="prefetch" href="/plana/assets/js/589.040b58f8.js"><link rel="prefetch" href="/plana/assets/js/59.d91c7a50.js"><link rel="prefetch" href="/plana/assets/js/590.7f347f61.js"><link rel="prefetch" href="/plana/assets/js/591.3acb8a8d.js"><link rel="prefetch" href="/plana/assets/js/592.c0fecc8a.js"><link rel="prefetch" href="/plana/assets/js/593.0ee76323.js"><link rel="prefetch" href="/plana/assets/js/594.7e15bb85.js"><link rel="prefetch" href="/plana/assets/js/595.b5540278.js"><link rel="prefetch" href="/plana/assets/js/596.2996c0fa.js"><link rel="prefetch" href="/plana/assets/js/597.3a3b9a07.js"><link rel="prefetch" href="/plana/assets/js/598.510c6ec5.js"><link rel="prefetch" href="/plana/assets/js/599.f7cd0ab9.js"><link rel="prefetch" href="/plana/assets/js/6.23e42cf9.js"><link rel="prefetch" href="/plana/assets/js/60.12c2a97e.js"><link rel="prefetch" href="/plana/assets/js/600.3a511d88.js"><link rel="prefetch" href="/plana/assets/js/601.1620fe4a.js"><link rel="prefetch" href="/plana/assets/js/602.92820a4e.js"><link rel="prefetch" href="/plana/assets/js/603.fa3b8f68.js"><link rel="prefetch" href="/plana/assets/js/604.a75f5d11.js"><link rel="prefetch" href="/plana/assets/js/605.6e16e44e.js"><link rel="prefetch" href="/plana/assets/js/606.3ca54f7c.js"><link rel="prefetch" href="/plana/assets/js/607.ed2521fd.js"><link rel="prefetch" href="/plana/assets/js/608.83c6a7b7.js"><link rel="prefetch" href="/plana/assets/js/609.cc5d05f6.js"><link rel="prefetch" href="/plana/assets/js/61.57554021.js"><link rel="prefetch" href="/plana/assets/js/610.e114869f.js"><link rel="prefetch" href="/plana/assets/js/611.4dfe17f1.js"><link rel="prefetch" href="/plana/assets/js/612.e9e7cdd9.js"><link rel="prefetch" href="/plana/assets/js/613.52fab004.js"><link rel="prefetch" href="/plana/assets/js/614.03e68635.js"><link rel="prefetch" href="/plana/assets/js/615.b5b202c3.js"><link rel="prefetch" href="/plana/assets/js/616.55d3ec0f.js"><link rel="prefetch" href="/plana/assets/js/617.caa80506.js"><link rel="prefetch" href="/plana/assets/js/618.97c71cdd.js"><link rel="prefetch" href="/plana/assets/js/619.506d3336.js"><link rel="prefetch" href="/plana/assets/js/62.c471c2b6.js"><link rel="prefetch" href="/plana/assets/js/620.d265d33b.js"><link rel="prefetch" href="/plana/assets/js/621.c7274a04.js"><link rel="prefetch" href="/plana/assets/js/622.78f88193.js"><link rel="prefetch" href="/plana/assets/js/623.460ecfe4.js"><link rel="prefetch" href="/plana/assets/js/624.af5db8f4.js"><link rel="prefetch" href="/plana/assets/js/625.b8b56400.js"><link rel="prefetch" href="/plana/assets/js/626.5f935139.js"><link rel="prefetch" href="/plana/assets/js/627.5eae5139.js"><link rel="prefetch" href="/plana/assets/js/628.b76c4230.js"><link rel="prefetch" href="/plana/assets/js/629.b5df5447.js"><link rel="prefetch" href="/plana/assets/js/63.a859b22b.js"><link rel="prefetch" href="/plana/assets/js/630.b4353e1e.js"><link rel="prefetch" href="/plana/assets/js/631.f52d250f.js"><link rel="prefetch" href="/plana/assets/js/632.fb3cd435.js"><link rel="prefetch" href="/plana/assets/js/633.d11743c5.js"><link rel="prefetch" href="/plana/assets/js/634.f274f0f2.js"><link rel="prefetch" href="/plana/assets/js/635.e4b93eee.js"><link rel="prefetch" href="/plana/assets/js/636.ddfe36dc.js"><link rel="prefetch" href="/plana/assets/js/637.773dfbf9.js"><link rel="prefetch" href="/plana/assets/js/638.5d3283ef.js"><link rel="prefetch" href="/plana/assets/js/639.1182aa0e.js"><link rel="prefetch" href="/plana/assets/js/64.3933d035.js"><link rel="prefetch" href="/plana/assets/js/640.fc30215e.js"><link rel="prefetch" href="/plana/assets/js/641.8fa04f8c.js"><link rel="prefetch" href="/plana/assets/js/642.9adc9013.js"><link rel="prefetch" href="/plana/assets/js/643.c553c77d.js"><link rel="prefetch" href="/plana/assets/js/644.f45f12bc.js"><link rel="prefetch" href="/plana/assets/js/645.45551213.js"><link rel="prefetch" href="/plana/assets/js/646.20f8455d.js"><link rel="prefetch" href="/plana/assets/js/647.f83d8512.js"><link rel="prefetch" href="/plana/assets/js/648.d2116c6d.js"><link rel="prefetch" href="/plana/assets/js/649.7c63bf5a.js"><link rel="prefetch" href="/plana/assets/js/65.c73421f0.js"><link rel="prefetch" href="/plana/assets/js/650.a8d4d68c.js"><link rel="prefetch" href="/plana/assets/js/651.660dc950.js"><link rel="prefetch" href="/plana/assets/js/652.e4a8d299.js"><link rel="prefetch" href="/plana/assets/js/653.d5cb1829.js"><link rel="prefetch" href="/plana/assets/js/654.06347c17.js"><link rel="prefetch" href="/plana/assets/js/655.1407708a.js"><link rel="prefetch" href="/plana/assets/js/656.c8c6bc8b.js"><link rel="prefetch" href="/plana/assets/js/657.5bfffe54.js"><link rel="prefetch" href="/plana/assets/js/658.548e92c7.js"><link rel="prefetch" href="/plana/assets/js/659.e6f86d89.js"><link rel="prefetch" href="/plana/assets/js/66.db88a898.js"><link rel="prefetch" href="/plana/assets/js/660.68b4f9c1.js"><link rel="prefetch" href="/plana/assets/js/661.7c1843eb.js"><link rel="prefetch" href="/plana/assets/js/662.fd5c9c14.js"><link rel="prefetch" href="/plana/assets/js/663.2a29079b.js"><link rel="prefetch" href="/plana/assets/js/664.f7e273fb.js"><link rel="prefetch" href="/plana/assets/js/665.92739f4f.js"><link rel="prefetch" href="/plana/assets/js/666.c9dfc4da.js"><link rel="prefetch" href="/plana/assets/js/667.e4e37653.js"><link rel="prefetch" href="/plana/assets/js/668.753f6377.js"><link rel="prefetch" href="/plana/assets/js/669.26bfae22.js"><link rel="prefetch" href="/plana/assets/js/67.ad91902f.js"><link rel="prefetch" href="/plana/assets/js/670.a70329fc.js"><link rel="prefetch" href="/plana/assets/js/671.11637c8c.js"><link rel="prefetch" href="/plana/assets/js/672.9a3410bf.js"><link rel="prefetch" href="/plana/assets/js/673.5f4041b7.js"><link rel="prefetch" href="/plana/assets/js/674.7a725878.js"><link rel="prefetch" href="/plana/assets/js/675.d55427e9.js"><link rel="prefetch" href="/plana/assets/js/676.eb15c05a.js"><link rel="prefetch" href="/plana/assets/js/677.98c18ede.js"><link rel="prefetch" href="/plana/assets/js/678.db86b061.js"><link rel="prefetch" href="/plana/assets/js/679.972243d8.js"><link rel="prefetch" href="/plana/assets/js/68.3e6dcf8f.js"><link rel="prefetch" href="/plana/assets/js/680.d9e2eba1.js"><link rel="prefetch" href="/plana/assets/js/681.8e0783ae.js"><link rel="prefetch" href="/plana/assets/js/682.a0c2e943.js"><link rel="prefetch" href="/plana/assets/js/683.d9a0e0b6.js"><link rel="prefetch" href="/plana/assets/js/684.19b16b09.js"><link rel="prefetch" href="/plana/assets/js/685.1dfde878.js"><link rel="prefetch" href="/plana/assets/js/686.5ebd864b.js"><link rel="prefetch" href="/plana/assets/js/687.9d3c3ee0.js"><link rel="prefetch" href="/plana/assets/js/688.7a8d52a4.js"><link rel="prefetch" href="/plana/assets/js/689.43733f87.js"><link rel="prefetch" href="/plana/assets/js/69.0c93e68b.js"><link rel="prefetch" href="/plana/assets/js/690.b3cc0545.js"><link rel="prefetch" href="/plana/assets/js/691.f0c9f432.js"><link rel="prefetch" href="/plana/assets/js/692.fe5d277f.js"><link rel="prefetch" href="/plana/assets/js/693.f2a5bc91.js"><link rel="prefetch" href="/plana/assets/js/694.0afc8ee3.js"><link rel="prefetch" href="/plana/assets/js/695.02d143c2.js"><link rel="prefetch" href="/plana/assets/js/696.fc35e844.js"><link rel="prefetch" href="/plana/assets/js/697.59baff52.js"><link rel="prefetch" href="/plana/assets/js/698.32395aca.js"><link rel="prefetch" href="/plana/assets/js/699.49a455e0.js"><link rel="prefetch" href="/plana/assets/js/7.4d84b003.js"><link rel="prefetch" href="/plana/assets/js/70.02b035df.js"><link rel="prefetch" href="/plana/assets/js/71.50c27702.js"><link rel="prefetch" href="/plana/assets/js/72.d0b51e9d.js"><link rel="prefetch" href="/plana/assets/js/73.88fbc437.js"><link rel="prefetch" href="/plana/assets/js/74.4323b154.js"><link rel="prefetch" href="/plana/assets/js/75.c07fede3.js"><link rel="prefetch" href="/plana/assets/js/76.d17b982e.js"><link rel="prefetch" href="/plana/assets/js/77.2c2c823d.js"><link rel="prefetch" href="/plana/assets/js/78.6339cdb8.js"><link rel="prefetch" href="/plana/assets/js/79.08610500.js"><link rel="prefetch" href="/plana/assets/js/8.28fd7fea.js"><link rel="prefetch" href="/plana/assets/js/80.fd045bb2.js"><link rel="prefetch" href="/plana/assets/js/81.c563629a.js"><link rel="prefetch" href="/plana/assets/js/82.f186782c.js"><link rel="prefetch" href="/plana/assets/js/83.5b829c7f.js"><link rel="prefetch" href="/plana/assets/js/84.0edd8a25.js"><link rel="prefetch" href="/plana/assets/js/85.cb1c8ff9.js"><link rel="prefetch" href="/plana/assets/js/86.6e0b2f9b.js"><link rel="prefetch" href="/plana/assets/js/87.36b6b2f5.js"><link rel="prefetch" href="/plana/assets/js/88.a23a2afa.js"><link rel="prefetch" href="/plana/assets/js/89.765b2b9d.js"><link rel="prefetch" href="/plana/assets/js/9.59274a6f.js"><link rel="prefetch" href="/plana/assets/js/90.a62aad9b.js"><link rel="prefetch" href="/plana/assets/js/91.96d9b5fa.js"><link rel="prefetch" href="/plana/assets/js/92.b7f7e048.js"><link rel="prefetch" href="/plana/assets/js/93.c7a06bfe.js"><link rel="prefetch" href="/plana/assets/js/94.097b631a.js"><link rel="prefetch" href="/plana/assets/js/95.cdb222d4.js"><link rel="prefetch" href="/plana/assets/js/96.5a864796.js"><link rel="prefetch" href="/plana/assets/js/97.7478b98b.js"><link rel="prefetch" href="/plana/assets/js/98.c9fff4ca.js"><link rel="prefetch" href="/plana/assets/js/99.1e106589.js">
    <link rel="stylesheet" href="/plana/assets/css/0.styles.e9cba6b3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/plana/" class="home-link router-link-active"><!----> <span class="site-name">Plana(方案A)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link router-link-active">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link router-link-active">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" aria-current="page" class="sidebar-link">README</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/01--ji-chu--qian-duan-gong-cheng-hua.html" class="sidebar-link">[基础]前端工程化</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/03--biao-zhun--qian-duan-gong-cheng--tong-yong-jie-gou-she-ji.html" class="sidebar-link">[标准]前端工程-通用结构设计</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/04--ti-gang--zeng-shan-gai-cha--chang-yong-pian-duan.html" class="sidebar-link">[提纲]增删改查-常用片段</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Devops</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/case/01--ji-chu-storybook.html" class="sidebar-link">[基础]storybook</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/01--ji-chu--qian-duan--ce-shi.html" class="sidebar-link">[基础]前端-测试</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/02--ti-gang--qian-duan--ce-shi-kuang-jia-jest.html" class="sidebar-link">[提纲]前端-测试框架(Jest)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/03--fang-an--wen-dang-xi-tong-doc-api.html" class="sidebar-link">[方案]文档系统(Doc+API)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/06--fang-an--qian-duan--zi-dong-hua-bu-shu-docker.html" class="sidebar-link">[方案]前端自动化部署</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/07--fang-an--qian-duan-jian-kong-yu-tong-ji--mai-dian.html" class="sidebar-link">[方案]前端监控与统计(埋点)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Micro</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/case/02--fang-an--wei-qian-duan-react-qiankun.html" class="sidebar-link">[方案]微前端(react+qiankun)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/01--ji-chu--wei-qian-duan.html" class="sidebar-link">[基础]微前端</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/02--sheng-tai--wei-qian-duan-kuang-jia.html" class="sidebar-link">[生态]微前端框架</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/03--ti-gang--wei-qian-duan--ye-wu-shi-jian.html" class="sidebar-link">[提纲]微前端-业务实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/04-note--qian-duan-jia-gou--cong-ru-men-dao-wei-qian-duan.html" class="sidebar-link">[Note]前端架构-从入门到微前端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Scaffold</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/03--ji-chu-webpack.html" class="sidebar-link">[基础]Webpack</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/04--ji-chu-umi.html" class="sidebar-link">[基础]Umi</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/06--ji-chu-vite.html" class="sidebar-link">[基础]vite</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/01--ji-chu--gong-cheng-hua-ast-dsl.html" class="sidebar-link">[基础]工程化(AST+DSL)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/02--ti-gang--gong-ju-lian-yu-gong-zuo-liu.html" class="sidebar-link">[提纲]工具链与工作流</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/03--ji-chu--ren-wu-yun-xing-qi-gulp.html" class="sidebar-link">[基础]任务运行器(Gulp)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/04--ji-chu--mo-kuai-jia-zai-qi.html" class="sidebar-link">[基础]模块加载器</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/05--fang-an--duo-ye-mian-mpa.html" class="sidebar-link">[方案]多页面(MPA)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/06--fang-an--duo-mo-kuai-mono.html" class="sidebar-link">[方案]多模块(Mono)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Solution</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Tricks</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/tricks/01--ti-gang-vue-xiang-mu--shi-jian-ji-qiao-crud.html" aria-current="page" class="active sidebar-link">[提纲]Vue项目-实践技巧(crud)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/tricks/02--ti-gang-react-xiang-mu--shi-jian-ji-qiao-perf.html" class="sidebar-link">[提纲]React项目-实践技巧(perf)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/01--fang-an--zeng-shan-gai-cha-dong-tai-biao-dan-formily.html" class="sidebar-link">[方案]增删改查+动态表单(Formily)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/02--fang-an--wu-liao-ku-di-dai-ma-ke-shi-hua-bian-cheng-iceworks.html" class="sidebar-link">[方案]物料库+低代码+可视化编程(iceworks)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/03--fang-an--tong-gou-ying-yong-fu-wu-duan-xuan-ran-nextjs-nuxtjs.html" class="sidebar-link">[方案]同构应用+服务端渲染(Nextjs+Nuxtjs)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/04-note-react-zhuang-tai-guan-li-yu-tong-gou-shi-zhan-2018.html" class="sidebar-link">[Note]React状态管理与同构实战</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Template</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/01-vue-element-admin-vue-plop.html" class="sidebar-link">vue-element-admin(vue+plop)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/02-ant-design-pro-react-umi-ts-hooks.html" class="sidebar-link">ant-design-pro(react+umi+ts+hooks)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/04-ng-alain-ng-zorro-ms.html" class="sidebar-link">ng-alain(ng+zorro+ms)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/07-easyweb-jquery-layui-ie8.html" class="sidebar-link">easyweb(jquery+layui+ie8)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/04--sheng-tai-vue--shi-yong-mo-ban.html" class="sidebar-link">[提纲]Vue-实用模板</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/05--sheng-tai-react--shi-yong-mo-ban.html" class="sidebar-link">[提纲]React-实用模板</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="提纲-vue项目-实践技巧-crud"><a href="#提纲-vue项目-实践技巧-crud" class="header-anchor">#</a> [提纲]Vue项目-实践技巧(crud)</h1> <ul><li><p>实战技巧，Vue原来还可以这样写 @todo</p> <ul><li><a href="https://juejin.im/entry/5eefebfee51d4573e0608749" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5eefebfee51d4573e0608749<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vue-patterns</p> <ul><li>@code
<ul><li><a href="https://github.com/learn-vuejs/vue-patterns" target="_blank" rel="noopener noreferrer">https://github.com/learn-vuejs/vue-patterns<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ZYSzys/vue-patterns-cn" target="_blank" rel="noopener noreferrer">https://github.com/ZYSzys/vue-patterns-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@doc
<ul><li><a href="https://learn-vuejs.github.io/vue-patterns/" target="_blank" rel="noopener noreferrer">https://learn-vuejs.github.io/vue-patterns/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://zyszys.github.io/vue-patterns-cn/" target="_blank" rel="noopener noreferrer">https://zyszys.github.io/vue-patterns-cn/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li> <li><p>2年vue项目实战经验汇总</p> <ul><li><a href="https://juejin.im/post/5e390a6df265da57503cb415" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5e390a6df265da57503cb415<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>「Vue实践」武装你的前端项目 @nice @digest</p> <ul><li><a href="https://juejin.im/post/5cab64ce5188251b19486041" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5cab64ce5188251b19486041<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Vue高阶组件封装</li> <li>性能优化：eventBus封装</li></ul></li> <li><p>Vue 实用开发技巧</p> <ul><li><a href="https://juejin.im/post/5d790819e51d453b5e465bc7" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5d790819e51d453b5e465bc7<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Vue 开发必须知道的 36 个技巧【近1W字】</p> <ul><li>后半部分有点水...</li> <li><a href="https://juejin.im/post/5d9d386fe51d45784d3f8637" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5d9d386fe51d45784d3f8637<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>《Vue.js实战》源码及答疑</p> <ul><li>@code <a href="https://github.com/icarusion/vue-book" target="_blank" rel="noopener noreferrer">https://github.com/icarusion/vue-book<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-常见问题-faq"><a href="#vue-常见问题-faq" class="header-anchor">#</a> Vue-常见问题 @faq</h1> <ul><li><p>fastclick引起的h5返回问题?? 有遇到的吗?? 难道我一个人...</p></li> <li><p>希望keep-alive能增加可以动态删除已缓存组件的功能</p> <ul><li><a href="https://github.com/vuejs/vue/issues/6509" target="_blank" rel="noopener noreferrer">https://github.com/vuejs/vue/issues/6509<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Vuex持久化插件-解决刷新数据消失的问题</p> <ul><li><a href="https://juejin.im/post/5b62999fe51d4519610e336e" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b62999fe51d4519610e336e<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>vuex-persistedstate https://github.com/robinvdvleuten/vuex-persistedstate</li></ul></li></ul> <h1 id="vue-项目痛点"><a href="#vue-项目痛点" class="header-anchor">#</a> Vue-项目痛点</h1> <ul><li>Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案) @nice @old
<ul><li><a href="https://juejin.im/post/59fa9257f265da43062a1b0e" target="_blank" rel="noopener noreferrer">https://juejin.im/post/59fa9257f265da43062a1b0e<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>页面拦截 <a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html" target="_blank" rel="noopener noreferrer">https://router.vuejs.org/zh-cn/advanced/navigation-guards.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 安装基础</span>
npm i <span class="token operator">-</span><span class="token constant">S</span> xxxx <span class="token comment">// npm install --save xxxx</span>
npm i <span class="token operator">-</span><span class="token constant">D</span> xxxx <span class="token comment">// npm install --save-dev xxxx</span>

<span class="token comment">// 换源</span>
npm config <span class="token operator">:</span> npm config <span class="token keyword">set</span> registry https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org
yarn config <span class="token operator">:</span> yarn config <span class="token keyword">set</span> registry https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org

npm install <span class="token operator">--</span>save<span class="token operator">-</span>dev chromedriver <span class="token operator">--</span>chromedriver_cdnurl<span class="token operator">=</span>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>cdn<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org<span class="token operator">/</span>dist<span class="token operator">/</span>chromedriver

<span class="token comment">// scoped模块化 -&gt; BEM命名法</span>
实际操作时： <span class="token punctuation">.</span>trangle<span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">.</span>trangle<span class="token punctuation">[</span>data<span class="token operator">-</span>v<span class="token operator">-</span><span class="token number">1</span>ec35ffc<span class="token punctuation">]</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
处理方法：
<span class="token punctuation">.</span>van<span class="token operator">-</span>tabs <span class="token operator">/</span>deep<span class="token operator">/</span> <span class="token punctuation">.</span>van<span class="token operator">-</span>ellipsis <span class="token punctuation">{</span> color<span class="token operator">:</span> blue<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span>van<span class="token operator">-</span>tabs <span class="token operator">&gt;&gt;&gt;</span> <span class="token punctuation">.</span>van<span class="token operator">-</span>ellipsis <span class="token punctuation">{</span> color<span class="token operator">:</span> blue<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// axios的 post 请求后台接受不到</span>
npm install qs <span class="token operator">-</span><span class="token constant">S</span>

config<span class="token punctuation">.</span>data <span class="token operator">=</span> qs<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// vuex的用户信息为什么还要存一遍在浏览器里?</span>
vuex的 store 干不过刷新

<span class="token comment">// &lt;template&gt;是什么,html5的标签么?</span>
Vue 的 template 有点不一样<span class="token punctuation">,</span>不是去给浏览器解析的
可以理解为一个临时标签<span class="token punctuation">,</span>用来方便你写循环<span class="token punctuation">,</span>判断的

<span class="token comment">// 首屏加载比较慢 -&gt; SSR</span>
因为请求回来就是一个处理完毕的 html
</code></pre></div><ul><li><p>vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践</p> <ul><li><a href="https://juejin.im/post/5b2ce07ce51d45588a7dbf76" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b2ce07ce51d45588a7dbf76<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Vue 项目里戳中你痛点的问题及解决办法 @nice</p> <ul><li>@by 愣锤</li> <li>路由传参query与params(刷新无效)的区别 -&gt; 用query更通用</li> <li>babel-plugin-import -&gt; 支持UI库(vantui)按需加载</li> <li>统一Vue-Awesome-Swiper做轮播 @nice @attention</li> <li>productionSourceMap: false -&gt; 这样就不生成.map</li> <li>Hiper ：一款令人愉悦的性能分析工具</li> <li>mixins混入简化常见操作</li> <li>@doc <a href="https://juejin.im/post/5b174de8f265da6e410e0b4e" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b174de8f265da6e410e0b4e<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 方法1 对应生命周期处理掉定时器</span>
<span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 方法2 $once -&gt; 代码可读性更强</span>
<span class="token keyword">const</span> timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token comment">// 某些定时器操作</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 通过$once来监听定时器，</span>
<span class="token comment">// 在beforeDestroy钩子可以被清除。</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$once</span><span class="token punctuation">(</span><span class="token string">'hook:beforeDestroy'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ====</span>
<span class="token comment">// 方法1</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;list&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>加载中或者骨架屏<span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;loading&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>请求失败，即断网的提示组件<span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;error&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>页面内容<span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;requestFinished&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;content&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>页面内容<span class="token operator">--</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;!isEmpty&quot;</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>例如有个列表，当然肯定还会有其他内容<span class="token operator">--</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>ul<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

          <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>为空提示组件<span class="token operator">--</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">&gt;</span>空空如也<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token comment">// 方法2</span>
<span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        
    api<span class="token punctuation">.</span>article<span class="token punctuation">.</span><span class="token function">articleDetail</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span> <span class="token punctuation">{</span>            
        <span class="token function">next</span><span class="token punctuation">(</span><span class="token parameter">vm</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>                
            vm<span class="token punctuation">.</span>info <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>                
            vm<span class="token punctuation">.</span>loadFinish <span class="token operator">=</span> <span class="token boolean">true</span>            
        <span class="token punctuation">}</span><span class="token punctuation">)</span>        
    <span class="token punctuation">}</span><span class="token punctuation">)</span>    
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 自定义组件（父子组件）的双向数据绑定 --&gt;</span>

<span class="token comment">&lt;!-- 方法1 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>msg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>msg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>msg = $event.target.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 子组件 -&gt; this.$emit('input', false)  --&gt;</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 方法2</span>
model<span class="token operator">:</span> <span class="token punctuation">{</span>
    prop<span class="token operator">:</span> <span class="token string">'show'</span><span class="token punctuation">,</span>
    event<span class="token operator">:</span> <span class="token string">'changed'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 由于model选项中的prop属性指定了，</span>
    <span class="token comment">// 所以show接收的是父组件v-model传递的值</span>
    show<span class="token operator">:</span> <span class="token punctuation">{</span>                
        type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>                
        <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>            
    <span class="token punctuation">}</span> 
<span class="token punctuation">}</span><span class="token punctuation">,</span> 
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>  
</code></pre></div><ul><li>vue中需要注意的问题总结(上) @old @simple
<ul><li><a href="https://juejin.im/post/5ad56d86518825556534ff4b" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5ad56d86518825556534ff4b<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-奇技淫巧"><a href="#vue-奇技淫巧" class="header-anchor">#</a> Vue-奇技淫巧</h1> <ul><li>奇技淫巧 - Vue Mixins 高级组件 与 Vue HOC 高阶组件 实践 @digest
<ul><li><a href="https://juejin.im/post/5c08c6ac6fb9a04a0e2cfe0a" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c08c6ac6fb9a04a0e2cfe0a<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/warpcgd/mixinAndHoc" target="_blank" rel="noopener noreferrer">https://github.com/warpcgd/mixinAndHoc<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>加快Vue项目的开发速度 @nice
<ul><li><a href="https://juejin.im/post/5c106485e51d450e657571a6" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c106485e51d450e657571a6<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/QDMarkMan/vue-base-template" target="_blank" rel="noopener noreferrer">https://github.com/QDMarkMan/vue-base-template<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>require.context()</li> <li>发挥Mixins的威力</li> <li>ElementUI table组件封装</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> files <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">context</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token regex">/\.js$/</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>files<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;./home.js&quot;] 返回一个数组</span>
<span class="token keyword">let</span> configRouters <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">/**
* inject routers
*/</span>
files<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">'./index.js'</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
  configRouters <span class="token operator">=</span> configRouters<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">files</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span> <span class="token comment">// 读取出文件中的default模块</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> configRouters <span class="token comment">// 抛出一个Vue-router期待的结构的数组</span>
</code></pre></div><ul><li>你或许不知道Vue的这些小技巧 @old
<ul><li><a href="https://juejin.im/post/5b1230c1f265da6e603933ad" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b1230c1f265da6e603933ad<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>v-if尽量不要与v-for在同一节点使用</li> <li>深度watch与watch立即触发回调</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 这些情况下不要使用箭头函数</span>
不应该使用箭头函数来定义一个生命周期方法
不应该使用箭头函数来定义 method 函数
不应该使用箭头函数来定义计算属性函数
不应该对 data 属性使用箭头函数
不应该使用箭头函数来定义 watcher 函数
</code></pre></div><ul><li>Vue.js最佳实践（五招让你成为Vue.js大师）
<ul><li><a href="https://segmentfault.com/a/1190000014085613" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000014085613<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue-router&quot;智能地&quot;发现这是同一个组件，然后它就决定要复用这个组件</span>
<span class="token comment">// 方法1</span>
watch<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token string">'$route'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    handler<span class="token operator">:</span> <span class="token string">'resetData'</span><span class="token punctuation">,</span>
    immediate<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 方法2 -&gt; 损失了一丢丢性能</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>view <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;$route.fullpath&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>

<span class="token comment">// 无所不能的render函数: 当你有多个根元素时，vue就会给你报错</span>
functional<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">h<span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> props<span class="token punctuation">.</span>routes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">route</span> <span class="token operator">=&gt;</span>
    <span class="token operator">&lt;</span>li key<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        <span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>Vue 使用中的小技巧 @nice @old
<ul><li><a href="https://juejin.im/post/5ae02f39518825672f198ac2" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5ae02f39518825672f198ac2<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>preserveWhitespace -&gt; 不想让元素和元素之间有空格, 减少文件体积</li> <li>transformToRequire -&gt; 不用把图片写成变量 @nice</li></ul></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$attrs<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$emit('input', $event.target.value)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$attrs<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listeners<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event =&gt;
        this.$emit('input', event.target.value)
    }
  }
}  

<span class="token comment">&lt;!-- transformToRequire使用 --&gt;</span>
transformToRequire: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href'
}
</code></pre></div><ul><li><p>初学者可能不知道的vue技巧</p> <ul><li><a href="https://juejin.im/post/5bc937285188255c63763ae2" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5bc937285188255c63763ae2<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vue技术分享-你可能不知道的7个秘密</p> <ul><li><a href="https://juejin.im/entry/5ae02151518825671a6371fa" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5ae02151518825671a6371fa<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>require.context</li> <li>精简vuex的modules引入</li> <li>require('@views/admin').default 动态加载路由 @old</li> <li>router key组件刷新 -&gt; 给router-view添加一个唯一的key</li> <li>组件包装、事件属性穿透问题</li></ul></li> <li><p>教你一个vue小技巧，一般人我不说的 @deprecated -&gt; 不是业务技巧</p> <ul><li><a href="https://juejin.im/post/5c19b8a56fb9a04a0440f6cc" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c19b8a56fb9a04a0440f6cc<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-升级迁徙"><a href="#vue-升级迁徙" class="header-anchor">#</a> Vue-升级迁徙</h1> <ul><li>Vue.js 升级踩坑小记 @digest
<ul><li><a href="https://juejin.im/post/5a1af88f5188254a701ec230" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5a1af88f5188254a701ec230<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="vue-websocket实践"><a href="#vue-websocket实践" class="header-anchor">#</a> Vue-WebSocket实践</h1> <ul><li>Vue合理配置WebSocket并实现群聊⛄
<ul><li><code>vue-native-websocket</code></li> <li><a href="https://juejin.im/post/5e08d53a6fb9a0162b7f4bad" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5e08d53a6fb9a0162b7f4bad<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-权限路由"><a href="#vue-权限路由" class="header-anchor">#</a> Vue-权限路由</h1> <blockquote><p>token存到cookie -&gt; 用token拉取user_info与role -&gt; 路由(router.addRoutes) -&gt; vuex渲染侧边</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>页面刷新， vuex的数据也会丢失，要重复上述操作
token有效期： session与后台刷新
前后端权限控制 当然都要做 但不提倡后台吐出这个菜单

<span class="token comment">// 按钮级别权限控制 @attention</span>
颗粒度
首先考虑页面设计是否合理

<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'LoginByUsername'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>loginForm<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 登录成功之后重定向到首页</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 登录失败提示错误</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">LoginByUsername</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> userInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> username <span class="token operator">=</span> userInfo<span class="token punctuation">.</span>username<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">loginByUsername</span><span class="token punctuation">(</span>username<span class="token punctuation">,</span> userInfo<span class="token punctuation">.</span>password<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> response<span class="token punctuation">.</span>data
      <span class="token comment">// 登录成功后将token存储在cookie之中</span>
      Cookies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'Token'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span> 
      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SET_TOKEN'</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>vue-element-asyncLogin</p> <ul><li>vue+element 的动态路由案例</li> <li>@code <a href="https://github.com/vkcyan/vue-element-asyncLogin" target="_blank" rel="noopener noreferrer">https://github.com/vkcyan/vue-element-asyncLogin<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vue权限路由实现方式总结 @nice -&gt; 详细分析多种方法</p> <ul><li><a href="https://juejin.im/post/5b5bfd5b6fb9a04fdd7d687a" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b5bfd5b6fb9a04fdd7d687a<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>vue-quasar-admin https://github.com/wjkang/vue-quasar-admin @nice</li> <li>@code:不使用全局路由守卫 https://codesandbox.io/s/r02zvvlpno @digest</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// iview-admin</span>
加载所有的路由 <span class="token operator">-</span><span class="token operator">&gt;</span> 跳转时判断权限

<span class="token comment">// vue-element-admin</span>
使用addRoutes动态挂载路由

<span class="token comment">// 由后端返回菜单路由</span>
前后端的配合要求更高

<span class="token comment">// 不使用全局路由守卫</span>
<span class="token comment">// @若邪 https://juejin.im/post/5b5bfd5b6fb9a04fdd7d687a</span>
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getAccessMenuList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../mock/menus&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> components <span class="token keyword">from</span> <span class="token string">&quot;../router/routerComponents.js&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>isLogin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">&quot;/login&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>initedApp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> loading <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$loading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        lock<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        text<span class="token operator">:</span> <span class="token string">&quot;初始化中&quot;</span><span class="token punctuation">,</span>
        spinner<span class="token operator">:</span> <span class="token string">&quot;el-icon-loading&quot;</span><span class="token punctuation">,</span>
        background<span class="token operator">:</span> <span class="token string">&quot;rgba(0, 0, 0, 0.7)&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> menus <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAccessMenuList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//模拟从后端获取</span>
      <span class="token keyword">var</span> routers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>menus<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> router <span class="token keyword">of</span> routers<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> component <span class="token operator">=</span> components<span class="token punctuation">[</span>router<span class="token punctuation">.</span>component<span class="token punctuation">]</span><span class="token punctuation">;</span>
        router<span class="token punctuation">.</span>component <span class="token operator">=</span> component<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>routers<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;setAccessMenuList&quot;</span><span class="token punctuation">,</span> menus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        loading<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          path<span class="token operator">:</span> <span class="token string">&quot;/&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&quot;/&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><ul><li><p>Vue-Access-Control @nice</p> <ul><li>Frontend access control framework based Vue</li> <li><a href="https://github.com/tower1229/Vue-Access-Control" target="_blank" rel="noopener noreferrer">https://github.com/tower1229/Vue-Access-Control<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vue基于d2-admin的<code>RBAC权限管理</code>解决方案 @nice</p> <ul><li><a href="https://juejin.im/post/5c30c666518825261c1b7191" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c30c666518825261c1b7191<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>d2-admin</li></ul></li> <li><p>关于 Vue 的路由权限管理 @digest ??</p> <ul><li><a href="https://juejin.im/entry/5a9bfa206fb9a028e52d4f3c" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5a9bfa206fb9a028e52d4f3c<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 新建一个全新的 Router，</span>
<span class="token comment">// 然后将新的 Router.matcher 赋给当前页面的管理 Router，</span>
<span class="token comment">// 以达到更新路由配置的目的</span>
<span class="token keyword">const</span> <span class="token function-variable function">createRouter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  mode<span class="token operator">:</span> <span class="token string">'history'</span><span class="token punctuation">,</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">resetRouter</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> newRouter <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  router<span class="token punctuation">.</span>matcher <span class="token operator">=</span> newRouter<span class="token punctuation">.</span>matcher
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre></div><ul><li><p>vue-axios-github</p> <ul><li>beforeEach判断权限再跳转</li> <li>实现登录拦截、登出、拦截器等功能</li> <li><a href="https://github.com/superman66/vue-axios-github" target="_blank" rel="noopener noreferrer">https://github.com/superman66/vue-axios-github<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>基于Vue2.0实现后台系统权限控制</p> <ul><li>类似vue-element-admin的方法</li> <li><a href="https://juejin.im/post/5a97e41bf265da23a048fa20" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5a97e41bf265da23a048fa20<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vue2-demo 实现基本的登录退出功能 @old</p> <ul><li>基础</li> <li><a href="https://github.com/lzxb/vue2-demo" target="_blank" rel="noopener noreferrer">https://github.com/lzxb/vue2-demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>vuejs单页应用的权限管理实践 @old</p> <ul><li><a href="http://blog.ahui.me/posts/2018-03-26/permission-control-of-vuejs/" target="_blank" rel="noopener noreferrer">http://blog.ahui.me/posts/2018-03-26/permission-control-of-vuejs/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> @null</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ----  router/index.js  ----</span>
<span class="token comment">// 初始化路由</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  
  routes<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> Login
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>  
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 动态路由 meta 定义了role</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> powerRouter <span class="token operator">=</span><span class="token punctuation">[</span>    
    <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>redirect<span class="token operator">:</span><span class="token string">'/red'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>component<span class="token operator">:</span> Index<span class="token punctuation">,</span>hidden<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/red'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> red<span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/yellow'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> yellow<span class="token punctuation">,</span> meta<span class="token operator">:</span> <span class="token punctuation">{</span>role<span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/blue'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> blue<span class="token punctuation">,</span> meta<span class="token operator">:</span> <span class="token punctuation">{</span>role<span class="token operator">:</span> <span class="token string">'C'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// ----  main.js  ----</span>
router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>role<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">//判断role 是否存在</span>

    	<span class="token keyword">if</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>newrouter<span class="token punctuation">.</span>length <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  
       		<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//resolve 钩子</span>
	    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
	    	  <span class="token keyword">let</span> newrouter
       		<span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>role <span class="token operator">==</span> <span class="token string">'A'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">//判断权限</span>
                newrouter <span class="token operator">=</span> powerRouter
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token keyword">let</span> newchildren <span class="token operator">=</span> powerRouter<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">route</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                  <span class="token keyword">if</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>meta<span class="token punctuation">)</span><span class="token punctuation">{</span>
                  	<span class="token keyword">if</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>role <span class="token operator">==</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>role<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 是否一致</span>
                  		<span class="token keyword">return</span> <span class="token boolean">true</span>
                    <span class="token punctuation">}</span>
                    <span class="token keyword">return</span> <span class="token boolean">false</span>
                  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                      <span class="token keyword">return</span> <span class="token boolean">true</span>
                  <span class="token punctuation">}</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              newrouter <span class="token operator">=</span> powerRouter
              newrouter<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> newchildren
          <span class="token punctuation">}</span>

          router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>newrouter<span class="token punctuation">)</span> <span class="token comment">//添加动态路由</span>
          store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'Roles'</span><span class="token punctuation">,</span>newrouter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
              <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>to <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>       

          <span class="token punctuation">}</span><span class="token punctuation">)</span>
	    <span class="token punctuation">}</span>	  
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
     	<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
           <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>vuejs2-authentication-tutorial
<ul><li><a href="https://auth0.com/blog/vuejs2-authentication-tutorial/" target="_blank" rel="noopener noreferrer">https://auth0.com/blog/vuejs2-authentication-tutorial/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>Vuejs-Authentication  @old @deprecated
<ul><li><a href="https://github.com/manojkumar3692/Vuejs-Authentication" target="_blank" rel="noopener noreferrer">https://github.com/manojkumar3692/Vuejs-Authentication<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六) @deprecated
<ul><li><a href="https://juejin.im/entry/5a60611b6fb9a01cb0495fcb" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5a60611b6fb9a01cb0495fcb<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-超时刷新token"><a href="#vue-超时刷新token" class="header-anchor">#</a> Vue-超时刷新token</h1> <ul><li>vue的token刷新处理
<ul><li><a href="https://www.jianshu.com/p/7b48d422e6f7" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/7b48d422e6f7<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>axios如何利用promise无痛刷新token
<ul><li>利用后台返回码</li> <li><a href="https://juejin.im/post/5d5ccdd75188255625591357" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5d5ccdd75188255625591357<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 安装jsonwebtoken</span>

<span class="token comment">// 解析jwt</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">decodeToken</span><span class="token punctuation">(</span><span class="token parameter">token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> jwt<span class="token punctuation">.</span><span class="token function">decode</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
<span class="token keyword">let</span> decoded <span class="token operator">=</span> <span class="token function">decodeToken</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'解密结果~~'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>decoded<span class="token punctuation">)</span>
<span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SET_TOKEN'</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>

<span class="token function">setToken</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>
<span class="token comment">// setRefreshToken(data.refreshToken)</span>
<span class="token function">setExp</span><span class="token punctuation">(</span>decoded<span class="token punctuation">.</span>exp<span class="token punctuation">)</span>
</code></pre></div><ul><li>请求前判断时间</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>service<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
  <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// Do something before request is sent</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>

      <span class="token comment">// console.log(config)</span>

      <span class="token comment">// </span>
      <span class="token keyword">let</span> isRrefreshToken <span class="token operator">=</span> config<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'auth/token'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isRrefreshToken<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log( '下次超时 -&gt; ', getExp())</span>
        <span class="token comment">// console.log( '当前时间 -&gt; ', Math.round(new Date().getTime()/1000) )</span>
        <span class="token comment">// 单位转化到秒</span>
        <span class="token keyword">let</span> diff <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">getExp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">1000</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">还剩 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>diff<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">秒(刷新:小于</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">TOKEN_REFRESH_TIMEOUT</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">s)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token keyword">let</span> isExp <span class="token operator">=</span> diff <span class="token operator">&lt;</span> <span class="token constant">TOKEN_REFRESH_TIMEOUT</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span>isExp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'RefreshToken'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>

      config<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Authorization'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> config
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// Do something with request error</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token comment">// for debug</span>
    Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><ul><li>悄悄地刷新Token</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">RefreshToken</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">refreshToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>

      <span class="token keyword">let</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
      <span class="token keyword">let</span> decoded <span class="token operator">=</span> <span class="token function">decodeToken</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SET_TOKEN'</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>

      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'防止超时，更新了token'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>decoded<span class="token punctuation">)</span>

      <span class="token function">setToken</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>
      <span class="token function">setExp</span><span class="token punctuation">(</span>decoded<span class="token punctuation">.</span>exp<span class="token punctuation">)</span>

      <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>

      MessageBox<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'登录超时，请重新登录'</span><span class="token punctuation">,</span> <span class="token string">'确定登出'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        confirmButtonText<span class="token operator">:</span> <span class="token string">'重新登录'</span><span class="token punctuation">,</span>
        cancelButtonText<span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">,</span>
        type<span class="token operator">:</span> <span class="token string">'warning'</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'SET_TOKEN'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
        <span class="token function">removeToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token function">removeRefreshToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token function">removeExp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

        location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h1 id="vue-主题换肤"><a href="#vue-主题换肤" class="header-anchor">#</a> Vue-主题换肤</h1> <ul><li><p>vue-element-admin换肤方案</p> <ul><li><a href="https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98" target="_blank" rel="noopener noreferrer">https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#更换主题<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>实现Vue项目主题切换</p> <ul><li><a href="https://juejin.im/post/5dee0610518825126d5a2255" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5dee0610518825126d5a2255<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-icon图标"><a href="#vue-icon图标" class="header-anchor">#</a> Vue-Icon图标</h1> <ul><li>vue项目中引入<code>iconfont</code> <ul><li><a href="https://juejin.im/post/5d25bca351882557d44c8a85" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5d25bca351882557d44c8a85<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-侧边栏刷新机制"><a href="#vue-侧边栏刷新机制" class="header-anchor">#</a> Vue-侧边栏刷新机制</h1> <ul><li>用户习惯点击侧边栏刷新页面
<ul><li>activated属性</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>监听侧边栏每个link 的 click事件，
每次点击都给router push 一个不一样的query 
来确保会重新刷新view
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 对应路由高亮</span>
<span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>active<span class="token operator">=</span><span class="token string">&quot;$route.path&quot;</span>
</code></pre></div><h1 id="vue-表格增强"><a href="#vue-表格增强" class="header-anchor">#</a> Vue-表格增强</h1> <ul><li>拖拽排序
<ul><li>Sortable (基于DOM) https://github.com/RubaXa/Sortable</li> <li>Vue.Draggable https://github.com/SortableJS/Vue.Draggable</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>sortable <span class="token operator">=</span> Sortable<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">onEnd</span><span class="token operator">:</span> <span class="token parameter">evt</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">//监听end事件 手动维护列表</span>
    <span class="token keyword">const</span> tempIndex <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>newList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span>oldIndex<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>newList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>evt<span class="token punctuation">.</span>newIndex<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> tempIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>内联编辑</li></ul> <h1 id="vue-性能优化"><a href="#vue-性能优化" class="header-anchor">#</a> Vue-性能优化</h1> <ul><li>Vue 应用性能优化指南 @nice
<ul><li><a href="https://juejin.im/post/5b960fcae51d450e9d645c5f" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5b960fcae51d450e9d645c5f<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Object.freeze()，减少observer 的开销 =&gt; created 的生命周期中把数据挂在到 this 上</li> <li>扁平化 Store 数据结构</li> <li>避免持久化存储的容量持续增长</li> <li>组件懒加载</li></ul></li></ul> <h1 id="vue-组件优化"><a href="#vue-组件优化" class="header-anchor">#</a> Vue-组件优化</h1> <ul><li>横向对比<code>Element-tree、ztree、ivew-tree</code>性能对比分析与源码修改自定义组件
<ul><li>@by <a href="https://github.com/pengqiangsheng" target="_blank" rel="noopener noreferrer">https://github.com/pengqiangsheng<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Vue-Giant-Tree https://github.com/tower1229/Vue-Giant-Tree</li> <li>vue-magic-tree https://github.com/pengqiangsheng/vue-magic-tree</li> <li><a href="https://juejin.im/post/5e17c1615188254bee1b452f" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5e17c1615188254bee1b452f<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 场景</span>
el<span class="token operator">-</span>tree随数据量增多开始卡顿<span class="token punctuation">,</span> 且需求进一步复杂

<span class="token comment">// vue-giant-tree --&gt; 套了一层ztree的壳</span>
雪碧图不好做

<span class="token comment">// vue-magic-tree</span>
</code></pre></div><h1 id="vue-echarts使用"><a href="#vue-echarts使用" class="header-anchor">#</a> Vue-Echarts使用</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 引入 ECharts 主模块</span>
<span class="token keyword">var</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 引入柱状图</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 引入提示框和标题组件</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/tooltip'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//第一种 watch options变化 利用vue的深度 watcher，options一有变化就重新setOption</span>
watch<span class="token operator">:</span> <span class="token punctuation">{</span>
  options<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    deep<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token comment">//第二种 只watch 数据的变化 只有数据变化时触发ECharts</span>
watch<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">seriesData</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>series<span class="token operator">:</span>val<span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="vue-异构组件"><a href="#vue-异构组件" class="header-anchor">#</a> Vue-异构组件</h1> <ul><li>how-to-safely-use-a-jquery-plugin-with-vue
<ul><li>Pass config with props</li> <li>v-once</li> <li>Letting jQuery handle updates</li> <li>Passing data from jQuery to Vue</li> <li><a href="https://medium.com/js-dojo/how-to-safely-use-a-jquery-plugin-with-vue-js-786acdfb743b" target="_blank" rel="noopener noreferrer">https://medium.com/js-dojo/how-to-safely-use-a-jquery-plugin-with-vue-js-786acdfb743b<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-使用jsx"><a href="#vue-使用jsx" class="header-anchor">#</a> Vue-使用JSX</h1> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span>
  babel-plugin-syntax-jsx
  babel-plugin-transform-vue-jsx
  babel-helper-vue-jsx-merge-props
  babel-preset-es2015
  --save-dev

<span class="token punctuation">{</span>
  <span class="token string">&quot;presets&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token string">&quot;es2015&quot;</span><span class="token punctuation">]</span>,
  <span class="token string">&quot;plugins&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token string">&quot;transform-vue-jsx&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="vue-骨架屏注入"><a href="#vue-骨架屏注入" class="header-anchor">#</a> Vue-骨架屏注入</h1> <ul><li>vue-content-placeholders
<ul><li><a href="https://github.com/michalsnik/vue-content-placeholders" target="_blank" rel="noopener noreferrer">https://github.com/michalsnik/vue-content-placeholders<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>vue-skeleton
<ul><li><a href="https://github.com/jrainlau/vue-skeleton" target="_blank" rel="noopener noreferrer">https://github.com/jrainlau/vue-skeleton<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>Vue页面骨架屏
<ul><li><a href="https://segmentfault.com/a/1190000014963269" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000014963269<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/RThong/vue-skeleton" target="_blank" rel="noopener noreferrer">https://github.com/RThong/vue-skeleton<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-首屏加载优化"><a href="#vue-首屏加载优化" class="header-anchor">#</a> Vue-首屏加载优化</h1> <ul><li>Vue SPA 首屏加载优化实践 @deprecated @demo
<ul><li>使用CDN</li> <li><a href="https://juejin.im/post/5a291092518825293b50366d" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5a291092518825293b50366d<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="vue-pwa实践"><a href="#vue-pwa实践" class="header-anchor">#</a> Vue-PWA实践</h1> <ul><li><p>vue-storefront</p> <ul><li>使用PWA</li> <li><a href="https://github.com/DivanteLtd/vue-storefront" target="_blank" rel="noopener noreferrer">https://github.com/DivanteLtd/vue-storefront<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>pwa-vue-template</p> <ul><li>当vue遇到pwa--vue+pwa移动端适配解决方案模板案例
<ul><li><a href="https://juejin.im/post/5af264296fb9a07aa54248f9" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5af264296fb9a07aa54248f9<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@demo <a href="https://github.com/nightzing/pwa-vue-template" target="_blank" rel="noopener noreferrer">https://github.com/nightzing/pwa-vue-template<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="vue-单元测试"><a href="#vue-单元测试" class="header-anchor">#</a> Vue-单元测试</h1> <ul><li>karma</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>如果一个组件的渲染输出完全取决于它的 props，
那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值

<span class="token comment">// 断言异步更新</span>
<span class="token comment">// 在状态更新后检查生成的 HTML</span>
<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'updates the rendered message when vm.message updates'</span><span class="token punctuation">,</span> <span class="token parameter">done</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span>MyComponent<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  vm<span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token string">'foo'</span>
  <span class="token comment">// 在状态改变后和断言 DOM 更新前等待一刻</span>
  Vue<span class="token punctuation">.</span><span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">expect</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>$el<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span>
    <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h1 id="vue-项目部署"><a href="#vue-项目部署" class="header-anchor">#</a> Vue-项目部署</h1> <ul><li><p>vue-cli3 项目从搭建优化到docker部署 @nice</p> <ul><li><a href="https://juejin.im/post/5c4a6fcd518825469414e062" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c4a6fcd518825469414e062<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/lentoo/vue-cli3-project" target="_blank" rel="noopener noreferrer">https://github.com/lentoo/vue-cli3-project<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>谈一谈我在SPA项目打包=&gt;部署的处理</p> <ul><li><a href="https://juejin.im/post/5c4835d651882523ea6e0a9a" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5c4835d651882523ea6e0a9a<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h1> <ul><li>58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度 @simple
<ul><li>@doc <a href="https://juejin.im/entry/5ee6d4e6518825431845baa9" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5ee6d4e6518825431845baa9<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>就性能而言， vue 存在很大的优势<span class="token operator">??</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 开箱性能

<span class="token comment">// computed和watch的使用场景</span>
computed <span class="token operator">--</span><span class="token operator">&gt;</span> 购物车商品结算
watch <span class="token operator">--</span><span class="token operator">&gt;</span> 搜索数据<span class="token operator">??</span>

<span class="token comment">// v-on可以监听多个方法吗?</span>
<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> v<span class="token operator">-</span>on<span class="token operator">=</span><span class="token string">&quot;{ input:onInput,focus:onFocus,blur:onBlur, }&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token comment">// $nextTick</span>
不能获取到更新后的值
通过回调得到

<span class="token comment">// vue组件中data为什么必须是一个函数?</span>
每次复用组件的时候，都会返回一份新的 data <span class="token operator">--</span><span class="token operator">&gt;</span> 私有

<span class="token comment">// SPA + MPA @Diff</span>
单页面不利于seo <span class="token operator">+</span> 初次加载时耗时多

<span class="token comment">// v-if和v-for的优先级</span>
v<span class="token operator">-</span><span class="token keyword">for</span> 具有比 v<span class="token operator">-</span><span class="token keyword">if</span> 更高的优先级 <span class="token operator">--</span><span class="token operator">&gt;</span> v<span class="token operator">-</span><span class="token keyword">if</span> 将分别重复运行于每个 v<span class="token operator">-</span><span class="token keyword">for</span> 循环中
不推荐 v<span class="token operator">-</span><span class="token keyword">if</span> 和 v<span class="token operator">-</span><span class="token keyword">for</span> 同时使用

<span class="token comment">// assets和static @diff</span>
assets <span class="token operator">--</span><span class="token operator">&gt;</span> 压缩体积

<span class="token comment">// delete和Vue.delete删除数组 @diff</span>
<span class="token keyword">delete</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 被删除的元素变成了 empty<span class="token operator">/</span><span class="token keyword">undefined</span> 其他的元素的键值还是不变
Vue<span class="token punctuation">.</span>delete <span class="token operator">--</span><span class="token operator">&gt;</span> 直接删除了数组<span class="token punctuation">,</span> 改变了数组的键值

<span class="token comment">// Vue2中注册在router-link上事件无效解决方法</span>
@click<span class="token punctuation">.</span>native

<span class="token comment">// params和query @diff</span>
query刷新不会丢失query里面的数据

<span class="token comment">// vue更新数组时触发视图更新的方法</span>
<span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">splice</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


<span class="token comment">// vuex</span>
@eg 音乐播放、登录状态、加入购物车
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/06--fang-an--duo-mo-kuai-mono.html" class="prev">
        [方案]多模块(Mono)
      </a></span> <span class="next"><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/tricks/02--ti-gang-react-xiang-mu--shi-jian-ji-qiao-perf.html">
        [提纲]React项目-实践技巧(perf)
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/plana/assets/js/app.26a35d46.js" defer></script><script src="/plana/assets/js/2.b5bc497d.js" defer></script><script src="/plana/assets/js/461.9f892ebc.js" defer></script>
  </body>
</html>
